<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>左右选</title>
		<!--框架必需start-->
		<script type="text/javascript" src="../../libs/js/jquery.js"></script>
		<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
		<script type="text/javascript" src="../../libs/js/framework.js"></script>
		<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" id="skin" prePath="../../" />
		<link rel="stylesheet" type="text/css" id="customSkin" />
		<!--框架必需end-->

		<!-- 双向选择器start -->
		<script type="text/javascript" src="../../libs/js/form/lister.js"></script>
		<!-- 双向选择器end -->
	</head>

	<body>
		<div class="page_content">

			<div class="groupTitle"><span>1、使用url赋值</span></div>
			
			<div class="red">此示例由后台支持</div>
			<!--
		<div class="lister" id="lister1" url="../../userAction.do?method=getUsersOfDoubleSelect"></div>
    	  <input type="button" value="获取值" onclick="getValue()"/> 
    	  <input type="button" value="获取选中项文本" onclick="getText()"/> 
    	  <input type="button" value="获取选中项数据" onclick="getData()"/> 
		  -->

			<div class="height_15"></div>

			<div class="groupTitle"><span>2、使用url+参数赋值</span></div>

			<div class="red">此示例由后台支持</div>
			<!--
		  <div class="lister" url="../../userAction.do?method=getUsersOfDoubleSelect" params='{"userinfor.organization.orgId":"3"}'></div>
		  -->

			<div class="height_15"></div>

			<div class="groupTitle"><span>3、赋值给标签的data属性</span></div>

			<div class="lister" data='{"fromList":[{"value":"1","key":"员工1"},{"value":"2","key":"员工2"},{"value":"3","key":"员工3"},{"value":"4","key":"员工4"}],"toList":[]}'></div>

			<div class="height_15"></div>

			<div class="groupTitle"><span>4、动态设置data（本地数据源）</span></div>

			<div class="lister" id="lister4" keepDefaultStyle="true"></div>

			<div class="height_15"></div>

			<div class="groupTitle"><span>5、动态设置data（远程数据源）</span></div>

			<div class="red">此示例由后台支持</div>
			<div class="lister" id="lister5" keepDefaultStyle="true"></div>

			<div class="height_15"></div>

			<div class="groupTitle"><span>6、初始时存在已选值</span></div>

			<p>通过设置数据的toList内容来实现已选值</p>
			<div class="lister" data='{"fromList":[{"value":"1","key":"员工1"},{"value":"2","key":"员工2"}],"toList":[{"value":"3","key":"员工3"},{"value":"4","key":"员工4"}]}'></div>
			<br/> <br/>
			<p>通过设置selectedValue实现已选值</p>
			<div class="lister" selectedValue="1,2" data='{"fromList":[{"value":"1","key":"员工1"},{"value":"2","key":"员工2"},{"value":"3","key":"员工3"},{"value":"4","key":"员工4"}],"toList":[]}'></div>
			<br/>使用selectedValue实现了已选值，在操作后再使用render()方法刷新后可以还原为初始值。参见最后一个例子：重置双选器。
			<br/>通过设置数据的toList内容来实现已选值则不可以还原。
			<br/><br/>另外 如果希望表单重置时已选值清空，需要设置selectedValue=""

			<div class="height_15"></div>

			<div class="groupTitle"><span>7、使用隐藏域</span></div>

			<p>如果为组件添加name属性，那么会自动生成一个隐藏域input，用来存储组件当前的value，该input的name与组件name一致。<br/>在提交表单时会用到。</p>
			<div class="lister" name="lister7" data='{"fromList":[{"value":"1","key":"员工1"},{"value":"2","key":"员工2"},{"value":"3","key":"员工3"},{"value":"4","key":"员工4"}],"toList":[]}'></div>
			<br /><br />
			<input type="button" value="获取隐藏域选中值" onclick="getHiddenValue()" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>8、禁用/启用</span></div>

			<div class="lister" disabled="true" id="lister8" data='{"fromList":[{"value":"1","key":"员工1"},{"value":"2","key":"员工2"},{"value":"3","key":"员工3"},{"value":"4","key":"员工4"}],"toList":[]}'></div>
			<br/>
			<input type="button" value="启用" onclick="enableLister()" style="width:120px;" />
			<input type="button" value="禁用" onclick="disableLister()" style="width:120px;" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>9、自定义尺寸</span></div>

			<div class="lister" listerWidth="120" listerHeight="120" data='{"fromList":[{"value":"1","key":"员工1"},{"value":"2","key":"员工2"},{"value":"3","key":"员工3"},{"value":"4","key":"员工4"}],"toList":[]}'></div>

			<div class="height_15"></div>

			<div class="groupTitle"><span>10、动态生成双选器</span></div>

			<div class="red">此示例由后台支持</div>
			<input type="button" value="点击生成（使用url）" id="testBtn" onclick="dynamicLister1()" /><br/><br/>
			<input type="button" value="点击生成（使用data）" id="testBtn2" onclick="dynamicLister2()" /><br/><br/>

			<div class="height_15"></div>

			<div class="groupTitle"><span>11、动态改变值</span></div>

			<div class="lister" id="lister11" data='{"fromList":[{"value":"2","key":"员工2"},{"value":"3","key":"员工3"},{"value":"4","key":"员工4"}],"toList":[{"value":"1","key":"员工1"}]}'></div>
			<br/>
			<input type="button" value='选中"员工2,员工3"' onclick="selectItems()" style="width:140px;" />
			<input type="button" value='反选"员工1"' onclick="unSelectItems()" style="width:120px;" />
			<input type="button" value='设值为"员工1,员工4"' onclick="setValues() " style="width:145px; " />
			<br/>

			<br/>
			<br/>
			<input type="button" value="追加一项到左侧" onclick="appendItem()" style="width:120px; " />
			<input type="button" value="从左侧移除“员工2” " onclick="removeItem()" style="width:140px; " />

			<div class="height_15 "></div>

			<div class="groupTitle "><span>12、重置双选器</span></div>

			<form id="form-12">
				<table style="width:500px; ">
					<tr>
						<th colspan="2" class="ali02">填写表单</th>
					</tr>
					<tr>
						<td>传统表单元素：</td>
						<td><input type="text" /></td>
					</tr>
					<tr>
						<td>双向选择器：</td>
						<td>
							<div class="lister" selectedValue=" " listerWidth="120" listerHeight="120" fromTitle=" " toTitle=" " data='{"fromList":[{"value ":"1","key":"员工1"},{"value":"2","key":"员工2"},{"value":"3","key":"员工3"},{"value":"4","key":"员工4"}],"toList":[]}'></div>
						</td>
					</tr>
					<tr>
						<td colspan="2" class="ali02">
							<input type="button" value="提交 " />
							<input type="button" value="重置 " onclick="resetForm() " />
						</td>
					</tr>
				</table>
			</form>

			<div class="height_15"></div>

			<div class="groupTitle"><span>13、itemClick事件</span></div>

			<div class="lister" id="lister-13" data='{"fromList":[{"value":"1","key":"员工1"},{"value":"2","key":"员工2"},{"value":"3","key":"员工3"},{"value":"4","key":"员工4"}],"toList":[]}'></div>

			<div class="height_15"></div>

			<div class="groupTitle"><span>14、设置最大可选条数</span></div>

			<div class="lister" maxSelection="3" data='{"fromList":[{"value":"1","key":"员工1"},{"value":"2","key":"员工2"},{"value":"3","key":"员工3"},{"value":"4","key":"员工4"}],"toList":[]}'></div>

		</div>
		<script>
			function initComplete() {
				var selData = { fromList: [{ value: "1", key: "员工1" }, { value: "2", key: "员工2" }, { value: "3 ", key: "员工3" }, { value: "4", key: "员工4" }], "toList": [] };
				$("#lister4").data("data", selData)
				$("#lister4").render();

				//获取json数据
				/*
$.post("../../userAction.do?method=getUsersOfDoubleSelect ",{"userinfor.organization.orgId ":"2 "},function(result){
			//赋给data属性
			$("#lister5").data("data ",result)
	 		//刷新下拉框
			$("#lister5 ").render(); 
		},"json ");
*/

				$("#lister-13 ").bind("itemClick ", function(e) {
					top.Toast("showNoticeToast", "触发事件 ")
				})
			}
			//获取值
			function getValue() {
				top.Toast("showNoticeToast", $("#lister1 ").attr("relValue "));
			}

			//获取文本
			function getText() {
				top.Toast("showNoticeToast", $("#lister1 ").attr("relText "));
			}

			//获取数据
			function getData() {
				top.Toast("showNoticeToast", JSON.stringify($("#lister1 ").data("selectedNodes ")));
			}

			//获取隐藏域值
			function getHiddenValue() {
				top.Toast("showNoticeToast", $("input:hidden[name='lister7' ] ").val());
			}

			//动态禁用/启用
			function disableLister() {
				$("#lister8").attr("disabled", true);
				//刷新双选器
				$("#lister8").render();
			}

			function enableLister() {
				$("#lister8").attr("disabled", false);
				//刷新双选器
				$("#lister8").render();
			}

			//动态生成双选器
			function dynamicLister1() {
				/*
var $lister=$('<div class="lister "></div>');
		$lister.attr("url ","../../userAction.do?method=getUsersOfDoubleSelect ");
		$lister.attr("params ",'{"userinfor.organization.orgId ":"3 "}');
		//将双向选择器加到按钮的后面
		$("#testBtn ").after($lister);   
		//渲染双向选择器  
		$lister.render();  
*/
			}

			function dynamicLister2() {
				/*
$.post("../../userAction.do?method=getUsersOfDoubleSelect ",{"userinfor.organization.orgId ":"2 "},function(result){
			var $lister=$('<div class="lister "></div>');
			//赋给data属性
			$lister.data("data ",result)
	 		//将双向选择器加到按钮的后面
			$("#testBtn2 ").after($lister);   
			//渲染双向选择器  
			$lister.render();  
		},"json ");
*/
			}

			//动态选中
			function selectItems() {
				$("#lister11 ").selectValue("2,3")
			}
			//动态反选
			function unSelectItems() {
				$("#lister11 ").unSelectValue("1")
			}
			//动态赋值
			function setValues() {
				$("#lister11 ").setValue("1,4")
			}

			//添加项
			function appendItem() {
				$("#lister11 ").addItem({ key: "员工5", value: "100" });
			}
			//删除项
			function removeItem() {
				$("#lister11 ").removeItem("2");
			}

			//表单重置
			function resetForm() {
				$("#form-12")[0].reset();
				$("#form-12 .lister").resetValue();
			}
		</script>
	</body>

</html>